<include file="Public:header" />
<div id="zoneHeader">
    <h2>24小时结算量走势图</h2>
</div><!--/#zoneHeader-->
<div id="zoneBody">
    <div id="flow"></div> <!--/#flow--> 
</div><!--/#zoneBody-->

<script type="text/javascript">
$(function () {
$.getJSON('/click/Api/getPlanTypeFlowHour.php', function(j) {
    if(!j.s) {
        return false;
    }

    var d = j.d,
        r = [];

    $.each(d, function(k, v) {
        var tmp = {name : k, data : []},
            t2 = 0;

        for(var i=0; i < 24; i++) {
            t2 = typeof(v[i]) == 'undefined' ? 0 : parseInt(v[i], 10);
            tmp.data.push(t2);
        }

        r.push(tmp);
    })

    $('#flow').highcharts({
            chart: {
                type: 'spline'
            },
            
            title: {
                text: '24小时结算量走势图',
                x: -20 //center
            },
            xAxis: {
                categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
            },
            yAxis: {
                title: {
                    text: '结算量(次)'
                },
                min : 0,
                /*labels: {   
                    formatter: function() {
                        return this.value +'次'
                    }
                },*/
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '次',
                crosshairs : true,   //显示指针线
                shared: true    //可同时显示多个项目对应的数据
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: r
        });

    })
});
</script>
<script src="__PUBLIC__/Js/chart/highcharts.js"></script>

<include file="Public:footer" />
